import React, {FC} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import ArticleDetailStore from '../../stores/ArticleDetailStore';
import {observer} from 'mobx-react';
type PropsType = {};
const Info: FC<PropsType> = observer(() => {
  const {title, desc, tag, dateTime, location} = ArticleDetailStore.detail;
  const tags = tag?.map(i => `#${i}`).join(' ') || '';
  return (
    <>
      <Text style={styles.titleTxt}>{title}</Text>
      <Text style={styles.descTxt}>{desc}</Text>
      <Text style={styles.tagsTxt}>{tags}</Text>
      <Text style={styles.timeAndLocationTxt}>
        {dateTime} {location}
      </Text>
      <View style={styles.line} />
    </>
  );
});

const styles = StyleSheet.create({
  titleTxt: {
    fontSize: 18,
    color: '#333',
    fontWeight: 'bold',
    paddingHorizontal: 16,
  },
  descTxt: {
    fontSize: 14,
    color: '#333',
    marginTop: 6,
    paddingHorizontal: 16,
  },
  tagsTxt: {
    fontSize: 14,
    color: '#305090',
    marginTop: 6,
    paddingHorizontal: 16,
  },
  timeAndLocationTxt: {
    fontSize: 12,
    color: '#bbb',
    marginVertical: 16,
    marginLeft: 16,
  },
  line: {
    width: '100%',
    height: 1,
    backgroundColor: '#ddd',
  },
});
export default Info;
